<template>
  <div class="user">
    <search-msg ref="searchMsg" @search="search" @output="output"></search-msg>
    <div class="pageBox">
      <el-pagination
        background
        layout="total"
        :total="total"
        style="display:inline-block;vertical-align: top;"
      ></el-pagination>
      <!-- <el-button type="success" size="small" icon="el-icon-circle-plus" @click="add">新增</el-button>
      <el-button type="info" size="small" plain icon="el-icon-tickets">导出表格</el-button>-->
    </div>
    <div class="tableBox">
    <el-table 
        :cell-style="{padding: '5px 0'}"
        stripe
        :data="tableData"
        border
        tooltip-effect="dark"
        style="width: 100%"
        height="px">
      <el-table-column prop="messageType" align="center" label="消息类型">
        <template slot-scope="scope">
            <el-tag size="small" v-if="scope.row.messageType===0">推广员申请</el-tag>
            <el-tag type="success" size="small" v-else-if="scope.row.messageType===1">推广员申请驳回</el-tag>
            <el-tag type="info" size="small" v-else-if="scope.row.messageType===2">推广员申请审核通过</el-tag>
            <el-tag size="small" v-if="scope.row.messageType===3">推广的商品有购买意向提交</el-tag>
            <el-tag type="success" size="small" v-else-if="scope.row.messageType===4">推广的商品已经退款</el-tag>
            <el-tag type="info" size="small" v-else-if="scope.row.messageType===5">用户购买商品成功</el-tag>
            <el-tag size="small" v-if="scope.row.messageType===6">用户退款成功</el-tag>
            <el-tag type="success" size="small" v-else-if="scope.row.messageType===7">用户团购成功</el-tag>
            <el-tag type="info" size="small" v-else-if="scope.row.messageType===8">用户团购失败</el-tag>
          </template>
      </el-table-column>
      <el-table-column prop="senderID" align="center" label="发送者ID号"></el-table-column>
      <el-table-column prop="content" align="center" label="发送内容"></el-table-column>
      <el-table-column prop="operatorID" align="center" label="用户ID号"></el-table-column>
      <el-table-column prop="modifyTime" align="center" label="操作时间"></el-table-column>
      <el-table-column prop="info" align="center" label="具体信息">
        <template  slot-scope="scope">
          <el-button size="mini" type="text" @click="detail(scope.row.messageID)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <el-dialog
      class="dialog"
      title="详情"
      width="750px"
      top="8vh"
      :visible.sync="dialog"
      :modal-append-to-body="false"
    >
    <div class="row">
      <div class="row-item">
        <div class="key">姓名</div>
        <div class="value">{{item.childName}}</div>
      </div>
      <div class="row-item">
        <div class="key">性别</div>
        <div class="value">{{item.childGender}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">电话</div>
        <div class="value">{{item.mobile}}</div>
      </div>
      <div class="row-item">
        <div class="key">所在省</div>
        <div class="value">{{item.province}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">所在市</div>
        <div class="value">{{item.city}}</div>
      </div>
      <div class="row-item">
        <div class="key">地址</div>
        <div class="value">{{item.address}}</div>
      </div>
    </div>
    <div class="row">
      <div class="row-item">
        <div class="key">所属机构</div>
        <div class="value">{{item.belongtoCompany}}</div>
      </div>
      <div class="row-item">
        <div class="key">申请备注</div>
        <div class="value">{{item.comments}}</div>
      </div>
    </div>
    
    </el-dialog>
  </div>
</template>

<script>
import SearchMsg from '@/components/SearchMsg'
import { messageList, getMessageList,getMessageDetail } from '@/api'

export default {
  name: 'message',
  components: {
    SearchMsg
  },
  data() {
    return {
      total: 4,
      tableData: [],
      dialog: false,
      total: 0,
      item: {},
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      messageList().then(res => {
        console.log(res)
        this.tableData=res
        this.total = res.length
      })
      
    },
    search(data) {
      getMessageList(data).then(res => {
        console.log(res)
        this.tableData=res
        this.total = res.length
      })
    },
    detail(id) {
      getMessageDetail(id).then(res => {
        this.item = res
        this.dialog = true
        console.log(res)
      })

    },
    output() {

    }
  }
}
</script>

<style scope lang="stylus" rel="stylesheet/stylus">
.el-table--fit 
  height: calc(100vh - 145px)
.el-date-editor
  width 300px
  margin 0 10px
</style>